<template>
  <div>
    <div class="logo"><img src="../assets/schoollogo.png" alt="" /></div>
    <div class="nav">
      <ul>
        <li @click="goClubIndex" :class="{ redd: index == 1 }">首页</li>
        <li @click="goClubLists" :class="{ redd: index == 2 }">社团列表</li>
        <li @click="goClubNotice" :class="{ redd: index == 3 }">社团公告</li>
        <li @click="goClubActivity" :class="{ redd: index == 4 }">社团活动</li>
        <li @click="goAdviceList" :class="{ redd: index == 5 }">意见反馈</li>
        <li @click="exitUser" v-show="!logorreg">退出登录</li>
        <li @click="goUserLogin" v-show="logorreg">登录/注册</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "indexHeader",
  mounted() {
    if(localStorage.getItem("student")) {
      this.logorreg = false
    }
    if(this.$route.name == "ClubIndex"){
      this.index = 1;
    } else if (this.$route.name == "ClubLists") {
      this.index = 2;
    } else if (this.$route.name == "ClubNotice") {
      this.index = 3;
    } else if (this.$route.name == "ClubActivity") {
      this.index = 4;
    } else if (this.$route.name == "AdviceList") {
      this.index = 5;
    } else {
      this.index = 1;
    }
  },
  data() {
    return {
      logorreg: "true",
      index: 1,
    };
  },
  methods: {
    goClubIndex() {
      console.log(this.$route);
      this.index = 1;
      this.$router.push("/ClubIndex");
    },
    goClubLists() {
      this.index = 2;
      this.$router.push("/ClubLists");
    },
    goClubNotice() {
      this.index = 3;
      this.$router.push("/ClubNotice");
    },
    goClubActivity() {
      this.index = 4;
      this.$router.push("/ClubActivity");
    },
    goAdviceList() {
      this.index = 5;
      this.$router.push("/AdviceList");
    },
    goUserLogin() {
      this.index = 1;
      this.logorreg = false;
      this.$router.push("UserLogin");
    },
    exitUser() {
      this.index = 1;
      localStorage.removeItem("student")
      this.$router.push("/ClubIndex");
      this.logorreg = true;
    },
  },
};
</script>


<style scoped>
.logo {
  height: 85px;
  width: 1900px;
  background-color: #1e874c;
}
.logo img {
  margin-left: 350px;
  margin-top: 10px;
}
.nav {
  height: 50px;
  width: 1320px;
  margin: 0 300px;
  background-color: #158ff9;
}
.nav ul li {
  float: left;
  list-style: none;
  font-size: 20px;
  color: white;
  margin-left: 40px;
  margin-right: 20px;
  line-height: 50px;
}
.nav ul li:nth-child(7) {
  float: right;
  font-size: 16px;
}
.nav ul li:nth-child(6) {
  margin: 0 20px 0 20px;
  float: right;
  font-size: 16px;
}
.redd {
  color: red !important;
}
</style>
